<!--  -->
<template>
  <div class="">
    <search-form @getFilmsList="getFilmsList" />
    <el-card class="mt-40px">
      <template #header>
        <div class="text-right">
          <el-button
            type="primary"
            :disabled="PermissionAuth('create', btnAuth)"
            @click="createFilm"
          >新增</el-button>
        </div>
      </template>
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          v-for="item of columns"
          :key="item?.key"
          :prop="item?.key"
          :label="item?.label"
          align="center"
          :width="item?.width || 150"
          :fixed="item?.fixed || undefined"
        >
          <template
            v-if="item?.key == 'action'"
            #default="scope"
          >
            <el-button
              type="primary"
              size="small"
              :disabled="PermissionAuth('update', btnAuth)"
              @click="updateClick(scope)"
            >修改</el-button>
            <el-button
              type="danger"
              size="small"
              :disabled="PermissionAuth('delete', btnAuth)"
              @click="deleteClick(scope)"
            >删除</el-button>
          </template>
          <template
            v-else-if="item?.key == 'date'"
            #default="scope"
          >
            <div>{{ dayjs(scope?.row?.releaseTime).format('YYYY-MM-DD') }}</div>
          </template>

          <template
            v-else-if="item?.key == 'gender'"
            #default="scope"
          >
            <div>{{ findKey(genderEnum, (o:string) => o == scope?.row?.gender) || scope?.row?.gender }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-2 mr-5">
        <el-pagination
          v-model:current-page="current"
          layout="prev, pager, next"
          :total="count"
          :page-size="5"
          background
          @current-change="updatePage"
        />
      </div></el-card>
    <modal
      :update-form="updateForm"
      @getFilmsList="getFilmsList"
      @setDialogStatus="setDialogStatus"
      @setDialogVisible="setDialogVisible"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, provide, readonly } from 'vue';
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
import { fetchGetStudentList, fetchDeleteFilm } from '@/service';
import { SearchForm, Modal } from './components';
import dayjs from 'dayjs';
import { genderEnum } from './enum';
import { findKey } from 'lodash-es';
import { useRoute } from 'vue-router';
import { PermissionAuth } from '@/utils';
import { AuthRoute } from '~/src/typings/router';
import { FilmsApi } from '~/src/typings/service/filmsApi';


const dialogVisible = ref(false);
const dialogStatus = ref(false);

const { btnAuth }  = useRoute().meta as AuthRoute.MetaProps;
// eslint-disable-next-line no-unused-vars
const updateForm = ref({});
provide('dialogVisible', dialogVisible);
provide('dialogStatus', readonly(dialogStatus));
const columns = [
  {
    key: 'id',
    label: 'ID',
    width: 300
  },
  {
    key: 'name',
    label: '学生名称',
    width: 180

  },
  {
    key: 'age',
    label: '年龄',
    width: 80
  },
  {
    key: 'grade',
    label: '年级',
    width: 80
  },
  {
    key: 'gender',
    label: '性别',
    width: 80
  },
  {
    key: 'subject',
    label: '学科',
    width: 180
  },
  {
    key: 'date',
    label: '报道时间',
    width: 180
  },
  {
    key: 'action',
    label: '操作',
    width: 180,
    fixed: 'right'
  }
];

const tableData = ref<FilmsApi.FilmsRequest[]>([]);
const count = ref<number>(0);
const current = ref<number>(0);
const getFilmsList = async (searchForm: FilmsApi.FilmsRequest = {}) => {
  Object.assign(searchForm, { currentPage: current.value, pageSize: 5 });
  const { data } = await fetchGetStudentList(searchForm);
  if (data) {
    tableData.value = data?.list;
    count.value = data?.total;
  }
};


const deleteClick = async (record: any) => {
  const { id } = record?.row as FilmsApi.FilmsRequest;
  const res = await fetchDeleteFilm({ id });
  if (res?.code === 0) {
    window.$message({
      type: 'success',
      message: '删除成功'
    });
    getFilmsList();
  }
};

function setDialogStatus(status: boolean) {
  dialogStatus.value = status;
}

function setDialogVisible(status: boolean) {
  dialogVisible.value = status;
}
function updateClick(record: any) {
  const rec = record.row;
  updateForm.value = rec;
  dialogVisible.value = true;
  dialogStatus.value = false;
}

function createFilm() {
  dialogVisible.value = true;
  dialogStatus.value = true;
}
function updatePage(page: number) {
  current.value = page;
  getFilmsList();
}

getFilmsList();
</script>

<style lang="scss" scoped></style>
